import { Math, Scene, Physics, Types, GameObjects } from 'phaser';

import sky from '../../../../assets/resources/demo/sky.png';
import ground from '../../../../assets/resources/demo/platform.png';
import star from '../../../../assets/resources/demo/star.png';
import bomb from '../../../../assets/resources/demo/bomb.png';
import dude from '../../../../assets/resources/demo/dude.png';

const resources = { sky, ground, star, bomb };

class DemoMainScene extends Scene {
  platforms!: Physics.Arcade.StaticGroup;
  player!: Physics.Arcade.Sprite;
  stars!: Physics.Arcade.Group;
  bombs!: Physics.Arcade.Group;
  scoreText!: GameObjects.Text;
  cursors!: Types.Input.Keyboard.CursorKeys;

  gameOver = false;
  score = 0;

  constructor() {
    super('demo/main');
  }

  preload() {
    this.load.setBaseURL(window.location.origin);
    this.load.spritesheet('dude', `${dude}`, { frameWidth: 32, frameHeight: 48 });
    Object.keys(resources).forEach(key => this.load.image(key, `${resources[key]}`));
  }

  create() {
    this.add.image(400, 300, 'sky');

    this.platforms = this.physics.add.staticGroup();
    this.platforms
      .create(400, 568, 'ground')
      .setScale(2)
      .refreshBody();
    this.platforms.create(600, 400, 'ground');
    this.platforms.create(50, 250, 'ground');
    this.platforms.create(750, 220, 'ground');

    this.player = this.physics.add.sprite(100, 450, 'dude');
    this.player.setBounce(0.2);
    this.player.setCollideWorldBounds(true);

    this.stars = this.physics.add.group({
      key: 'star',
      repeat: 11,
      setXY: { x: 12, y: 0, stepX: 70 },
    });
    this.stars.children.iterate((child: any) => {
      child.setBounceY(Math.FloatBetween(0.4, 0.8));
    });

    this.bombs = this.physics.add.group();

    this.scoreText = this.add.text(16, 16, 'score: 0', { fontSize: '32px', fill: '#fff' });

    this.cursors = this.input.keyboard.createCursorKeys();

    this.physics.add.collider(this.player, this.platforms);
    this.physics.add.collider(this.stars, this.platforms);
    this.physics.add.collider(this.bombs, this.platforms);

    this.physics.add.overlap(this.player, this.stars, this.collectStar, undefined, this);
    this.physics.add.collider(this.player, this.bombs, this.hitBomb, undefined, this);

    this.anims.create({
      key: 'left',
      frames: this.anims.generateFrameNumbers('dude', { start: 0, end: 3 }),
      frameRate: 10,
      repeat: -1,
    });
    this.anims.create({
      key: 'turn',
      frames: [{ key: 'dude', frame: 4 }],
      frameRate: 20,
    });
    this.anims.create({
      key: 'right',
      frames: this.anims.generateFrameNumbers('dude', { start: 5, end: 8 }),
      frameRate: 10,
      repeat: -1,
    });
  }

  update() {
    if (this.cursors.left!.isDown) {
      this.player.setVelocityX(-160);
      this.player.anims.play('left', true);
    } else if (this.cursors.right!.isDown) {
      this.player.setVelocityX(160);
      this.player.anims.play('right', true);
    } else {
      this.player.setVelocityX(0);
      this.player.anims.play('turn');
    }
    if (this.cursors.up!.isDown && this.player.body.touching.down) {
      this.player.setVelocityY(-330);
    }
  }

  collectStar(player: any, starItem: any) {
    starItem.disableBody(true, true);
    this.score += 10;
    this.scoreText.setText(`score: ${this.score}`);

    if (this.stars.countActive(true) === 0) {
      this.stars.children.iterate((child: any) => {
        child.enableBody(true, child.x, 0, true, true);
      });
      const x = player.x < 400 ? Math.Between(400, 800) : Math.Between(0, 400);
      const bombItem = this.bombs.create(x, 16, 'bomb');
      bombItem.setBounce(1);
      bombItem.setCollideWorldBounds(true);
      bombItem.setVelocity(Math.Between(-200, 200), 20);
    }
  }

  hitBomb(player: any) {
    this.physics.pause();
    player.setTint(0xff0000);
    player.anims.play('turn');
    this.gameOver = true;
  }
}

export default DemoMainScene;
